<template>
	<view class="member-level">
		<view class="member-info-container">
			<view class="member-info" v-if="memberInfo != null">
				<view class="member-face">
					<image v-if="memberInfo.user_info.user_headimg" :src="$util.img(memberInfo.user_info.user_headimg)" mode="aspectFill"></image>
					<image v-else :src="$util.img('upload/uniapp/default_head.png')" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="nick-name">{{ memberInfo.user_info.nick_name }}</view>
					<view class="level-name">
						<text>{{ memberInfo.level_info.level_name }}</text>
					</view>
					<view class="upgrade-progress"></view>
					<view class="upgrade-desc" v-if="memberInfo.next_level_info">{{ memberInfo.next_level_info.desc }}</view>
					<view class="upgrade-desc" v-else>您已经是最高级别的会员了！</view>
				</view>
			</view>
			<view class="level-equity">
				<view class="equity-top">
					<image :src="$util.img('upload/uniapp/member/member_level_star.png')"></image>
					<view class="title">升级会员，享专属权益</view>
				</view>
				<view class="clearfix">
					<view class="fix-list">
						<image :src="$util.img('upload/uniapp/member/equity-bg.png')"></image>
						<view class="position-view">
							<view class="icon-box"><text class="iconfont icontagfill"></text></view>
							<view class="title">专属标签</view>
							<view class="desc">标签达人</view>
						</view>
					</view>
					<view class="fix-list" v-if="memberInfo != null">
						<image :src="$util.img('upload/uniapp/member/equity-bg.png')"></image>
						<view class="position-view">
							<view class="icon-box"><text class="iconfont iconzhekouxiao"></text></view>
							<view class="title">专享折扣</view>
							<view class="desc">
								专享
								<text class="ns-text-color">{{ memberInfo.level_info.goods_discount * 10 }}</text>
								折
							</view>
						</view>
					</view>
					<view class="fix-list">
						<image :src="$util.img('upload/uniapp/member/equity-bg.png')"></image>
						<view class="position-view">
							<view class="icon-box"><text class="iconfont iconlikefill"></text></view>
							<view class="title">优质服务</view>
							<view class="desc">360度全方位</view>
						</view>
					</view>
				</view>
			</view>
			<view class="member-info-bottom"><image :src="$util.img('upload/uniapp/member/member_level_bottom.png')"></image></view>
		</view>
		<view class="level-lists">
			<h3 class="title"><text>会员等级</text></h3>
			<view v-for="(item, index) in memberLevelList" :key="index" class="level-list-box">
				<text class="level-item-head">{{ item.level_name }}</text>
				<view class="level-item">
					<text class="level-item-tit">条件</text>
					<text v-if="levelConfig.type == 1" class="level-item-desc">累计积分满{{ item.min_integral }}分</text>
					<text v-else-if="levelConfig.type == 2" class="level-item-desc">消费额满{{ item.quota }}元</text>
					<text v-else-if="levelConfig.type == 3" class="level-item-desc">购买量满{{ item.order_num }}笔</text>
				</view>
				<view class="level-item">
					<text class="level-item-tit">权益</text>
					<text v-if="item.goods_discount < 1" class="level-item-desc">购物享{{ item.goods_discount * 10 }}折优惠</text>
					<text v-else class="level-item-desc"></text>
				</view>
				<view class="level-item">
					<text class="level-item-tit">升级礼包</text>
					<view class="level-item-desc">
						<text v-if="item.give_coupon > 0">升级送优惠券</text>
						<text v-if="item.give_point > 0">升级送积分</text>
						<text v-if="item.give_money > 0">升级送余额</text>
					</view>
				</view>
				<view v-if="item.desc" class="level-item">
					<text class="level-item-tit">等级说明</text>
					<text class="level-item-desc">{{ item.desc }}</text>
				</view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import loadingCover from '@/components/loading/loading.vue';
export default {
	components: {
		loadingCover
	},
	data() {
		return {
			open: 0,
			memberLevelList: null,
			memberAccount: null,
			levelConfig: '',
			memberInfo: null
		};
	},
	async onLoad() {
		await this.levelQuery();
		await this.memberAccountFunction();
		await this.memberLevelConfig();
		await this.memberInfoFunction();
	},
	mixins: [http],
	methods: {
		/* 会员等级 */
		async levelQuery() {
			let res = await this.sendRequest({
				url: 'System.Member.memberLevelQuery',
				async: false
			});
			if (res.code == 0) {
				this.memberLevelList = res.data.data;
			}
		},
		/* 获取会员积分余额账户情况 */
		async memberAccountFunction() {
			let res = await this.sendRequest({
				url: 'System.Member.memberAccount',
				async: false
			});
			if (res.code == 0) {
				this.memberAccount = res.data;
			}
		},
		/* 会员等级配置 */
		async memberLevelConfig() {
			let res = await this.sendRequest({
				url: 'System.Config.memberLevelConfig',
				async: false
			});
			if (res.code == 0) {
				this.levelConfig = res.data;
			}
		},
		/* 获取会员信息 */
		async memberInfoFunction() {
			let res = await this.sendRequest({
				url: 'System.Member.memberInfo',
				async: false
			});
			if (res.code == 0) {
				this.memberInfo = res.data;
				this.changeData();
			}
		},
		changeData() {
			if (this.memberLevelList) {
				for (let i = 0; i < this.memberLevelList.length; i++) {
					if (this.memberLevelList[i].level_id == this.memberInfo.member_level) {
						this.memberInfo.level_info = this.memberLevelList[i];
						if (this.memberLevelList[i + 1]) {
							this.memberInfo.next_level_info = this.memberLevelList[i + 1];
						}
					}
				}
			}
			if (this.memberInfo.next_level_info) {
				if (this.levelConfig.type == 1) {
					this.memberInfo.next_level_info.need = this.memberInfo.next_level_info.min_integral - this.memberAccount.member_sum_point;
					this.memberInfo.next_level_info.need = this.memberInfo.next_level_info.need < 0 ? 0 : this.memberInfo.next_level_info.need;
					this.memberInfo.next_level_info.desc =
						'已有' + Math.round(this.memberAccount.member_sum_point) + '积分，升级还需' + Math.round(this.memberInfo.next_level_info.need) + '积分';
					this.memberInfo.next_level_info.ratio = Math.round(this.memberAccount.member_sum_point / this.memberInfo.next_level_info.min_integral, 2) * 100;
					this.memberInfo.next_level_info.ratio = this.memberInfo.next_level_info.ratio > 100 ? 100 : this.memberInfo.next_level_info.ratio;
				} else if (this.levelConfig.type == 2) {
					this.memberInfo.next_level_info.need = this.memberInfo.next_level_info.quota - this.memberAccount.member_cunsum;
					this.memberInfo.next_level_info.need = this.memberInfo.next_level_info.need < 0 ? 0 : this.memberInfo.next_level_info.need;
					this.memberInfo.next_level_info.desc = '已消费' + this.memberAccount.member_cunsum + '元，升级还需' + this.memberInfo.next_level_info.need + '元';
					this.memberInfo.next_level_info.ratio = Math.round(this.memberAccount.member_cunsum / this.memberInfo.next_level_info.quota, 2) * 100;
					this.memberInfo.next_level_info.ratio = this.memberInfo.next_level_info.ratio > 100 ? 100 : this.memberInfo.next_level_info.ratio;
				} else if (this.levelConfig.type == 3) {
					this.memberInfo.next_level_info.need = this.memberInfo.next_level_info.order_num - this.memberAccount.order_num;
					this.memberInfo.next_level_info.need = this.memberInfo.next_level_info.need < 0 ? 0 : this.memberInfo.next_level_info.need;
					this.memberInfo.next_level_info.desc = '已购买' + this.memberAccount.order_num + '次，升级还需购买' + this.memberInfo.next_level_info.need + '次';
					this.memberInfo.next_level_info.ratio = Math.round(this.memberAccount.order_num / this.memberInfo.next_level_info.order_num, 2) * 100;
					this.memberInfo.next_level_info.ratio = this.memberInfo.next_level_info.ratio > 100 ? 100 : this.memberInfo.next_level_info.ratio;
				}
			}
			if (this.$refs.loadingCover == undefined) return;
			this.$refs.loadingCover.hide();
		}
	}
};
</script>

<style lang="scss">
.member-level {
	.member-info-container {
		padding: 40rpx 40rpx 0 40rpx;
		background: #797173;
		position: relative;
		.member-info {
			display: flex;
			.member-face {
				width: 116rpx;
				height: 116rpx;
				border-radius: 100%;
				border: 4rpx solid #ffffff;
				overflow: hidden;
				margin-right: $ns-margin;
				image {
					width: 100%;
					height: 100%;
					vertical-align: middle;
				}
			}
			.info {
				max-width: 75%;
				.nick-name {
					line-height: 1.2;
					color: #ffffff;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					word-wrap: break-word;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.level-name {
					margin-top: 10rpx;
					display: flex;
					text {
						display: -webkit-box;
						max-width: 70%;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
						word-wrap: break-word;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						border-radius: $ns-border-radius;
						font-size: $ns-font-size-sm;
						padding: 6rpx 10rpx;
						line-height: 1.5;
						color: #e7e525;
						border: 2rpx solid #e7e525;
					}
				}
				.upgrade-progress {
					width: 100%;
					height: 6rpx;
					background: #e3ce96;
					border-radius: 4rpx;
					margin-top: $ns-margin;
				}
				.upgrade-desc {
					margin-top: 10rpx;
					color: #cccccc;
					font-size: $ns-font-size-sm;
				}
			}
		}
		.level-equity {
			margin-top: 60rpx;
			.equity-top {
				text-align: center;
				line-height: 1;
				image {
					width: 140rpx;
					height: 36rpx;
				}
				.title {
					color: #e3ce96;
					margin-top: 10rpx;
				}
			}
			.clearfix {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.fix-list {
					position: relative;
					width: 190rpx;
					margin-right: 40rpx;
					image {
						width: 100%;
						height: 288rpx;
						vertical-align: middle;
					}
					.position-view {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;

						.icon-box {
							line-height: 1;
							margin: 30rpx auto 0 auto;
							text-align: center;
							.iconfont {
								font-size: 60rpx;
							}
						}
						.title {
							text-align: center;
							margin-top: 10rpx;
						}
						.desc {
							text-align: center;
							font-size: $ns-font-size-sm;
							color: #a2690d;
							text {
								font-weight: bold;
							}
						}
					}
				}
				.fix-list:last-child {
					margin-right: 0;
				}
			}
		}
		.member-info-bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 5;
			width: 100%;
			line-height: 0;
			image {
				width: 100%;
				height: 100rpx;
			}
		}
	}
	.level-lists {
		.title {
			text-align: center;
			font-weight: normal;
			margin-bottom: 40rpx;
			text::before {
				margin-right: $ns-margin;
				content: '';
				width: 20rpx;
				height: 4rpx;
				background: #000;
				display: inline-block;
				vertical-align: middle;
				transform: translateY(-50%);
			}
			text::after {
				margin-left: $ns-margin;
				content: '';
				width: 20rpx;
				height: 4rpx;
				background: #000;
				display: inline-block;
				vertical-align: middle;
				transform: translateY(-50%);
			}
		}
	}
}
.level-list-box {
	margin: 30rpx 30rpx 0;
	border-radius: 20rpx;
	&:last-of-type {
		margin-bottom: 30rpx;
	}
	.level-item-head {
		display: block;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		font-size: $ns-font-size-base;
		color: #fff;
		background-color: #e3ce96;
	}
	.level-item {
		display: flex;
		border-bottom: 2rpx solid #e3ce96;
		.level-item-tit {
			width: 30%;
			box-sizing: border-box;
			padding: 0 20rpx;
			line-height: 60rpx;
			border-left: 2rpx solid #e3ce96;
			border-right: 2rpx solid #e3ce96;
		}
		.level-item-desc {
			width: 60%;
			flex-grow: 1;
			padding: 0 20rpx;
			line-height: 60rpx;
			border-right: 2rpx solid #e3ce96;
			box-sizing: border-box;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			word-wrap: break-word;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			text {
				margin-right: 10rpx;
			}
		}
	}
}
</style>
